<template>
  <div class="site-frame-login">
    <div class="login-form">
      <div class="form-head">
        <span>上海市安装行业协会</span>
      </div>
      <p class="h-tip">{{tip}}</p>
      <div class="form-main">
        <div class="login-type">
          <span class="text" :class="{'active': type==1}" @click="changeLoginType(1)">登录</span>
          <span class="text" v-if="role!=3&&role!=4" :class="{'active': type==2}" @click="changeLoginType(2)">注册</span>
          <span class="text" v-else :class="{'active': type==2}"></span>
          <div class="bottom-line" :class="{'active': type==2}"></div>
        </div>
        <div v-if="type==1">
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="user.name" placeholder="用户名" >
          </div>
          <div class="login-form-item">
            <input type="password" class="form-input" v-model="user.password" placeholder="密码">
          </div>
        </div>
        <div v-if="type==2&&role!=3&&role!=4">
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.userName" placeholder="用户名" >
          </div>
          <div class="login-form-item">
            <input type="password" class="form-input" v-model="regist.password" placeholder="密码">
          </div>
          <div class="login-form-item">
            <input type="password" class="form-input" v-model="regist.password2" placeholder="确认密码">
          </div>
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.dwmch" placeholder="单位名称">
          </div>
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.weituoxming" placeholder="委托人(办理人)姓名">
          </div>
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.zhiwu" placeholder="职务">
          </div>
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.mobile" placeholder="手机号">
          </div>
          <div class="login-form-item">
            <input type="text" class="form-input" v-model="regist.email" placeholder="邮箱">
          </div>
          <div class="login-form-item">
            <a-upload class="az-upload"
                name="fileName"
                :multiple="false"
                :action="uploadUrl"
                :headers="headers"
                :before-upload="beforeUpload"
                :showUploadList="false"
                accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                @change="handleChange"
              >
                <a-button class="upload-btn">{{regist.regFileQy || '企业营业执照扫描件'}}</a-button>
              </a-upload>
            <!-- <span class="file-des">企业资质上传+</span> -->
          </div>
          <div class="login-form-item">
            <a-upload
                name="fileName"
                :multiple="false"
                :action="uploadUrl"
                :headers="headers"
                :before-upload="beforeUpload1"
                accept=".doc,.docx,.xls,.xlsx,.pdf,.png,.jpg,.jpeg,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                :showUploadList="false"
                @change="handleChange1"
              >
                <a-button class="upload-btn">{{regist.regFileSq || (role==2?'会员变更委托书':'入会申请授权书')}}</a-button>
              </a-upload>
            <!-- <input type="file" class="form-input file-input"  placeholder="上传文件">
            <span class="file-des">企业注册授权书上传+</span> -->
          </div>
          <p class="rcolor">支持图片、PDF、office文件且文件大小不超过5M</p>
          <div class="login-form-item">
            <a-button class="upload-btn" @click="downLoad">{{role==2?'变更委托书模板下载':'授权书模板下载'}}</a-button>
          </div>
        </div>
        <div class="login-form-item">
          <button class="godon-btn login-confirm-btn" @click="login">{{type==2?'注册申请':'登录'}}</button>
        </div>
        <div class="login-form-item">
          <button class="godon-btn login-confirm-btn" @click="goHome">返回首页</button>
        </div>
        <p v-if="role==3||role==4" class="login-tip rcolor">注：没有登陆账号请联系协会管理员</p>
        <div class="login-form-item between">
          <div class="left">
            <!-- <span class="cursor"><i class="el-icon-success"></i>记住我</span>
            <span class="cursor">找回密码</span> -->
          </div>
          <!-- <div class="register cursor">注册</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { tracker } from "lib/analytics"
import { isPwd } from "lib/until"
import {
  mapActions
} from 'vuex'
export default {
  name: "login",
  data () {
    return {
      type: 1, // 1账号密码登录2：短信验证码登录
      user: {
        name: '',
        password: ''
      },
      role: 0,
      regist: {
        userName: '',
        password: '',
        password2: '',
        dwmch: '',
        weituoxming: '',
        zhiwu: '',
        mobile: '',
        email: '',
        regFileQy: '',
        regFileSq: ''
      },
      headers: { authorization: "authorization-text" },
      uploadUrl: `${process.env.VUE_APP_URL}/provider/upload`,
      phone: "",
      password: "",
      checked: false
    }
  },
  created () {
    this.role = this.$route.query.role || 0
  },
  computed: {
    tip () {
      return this.role == 3 ? '科技创新奖申报' : this.role == 4 ? '科技成果评价申报' : this.role == 2 ? '会员变更' : this.role == 1 ? '入会申报' : ''
    }
  },
  components: {
  },
  methods: {
    ...mapActions([
      'updateOriginazation',
      'updateProjectInfo'
    ]),
    changeLoginType (type) {
      if (this.type == type) {
        return false
      }
      this.type = type
    },
    keyDown (e) {
      if (e.keyCode === 9) {
        event.preventDefault()
      }
    },
    downLoad () {
      window.location.href = this.role == 2 ? "http://www.sig.org.cn/anzren/manues/registBg_chengnuoshu.docx" : "http://www.sig.org.cn/anzren/manues/regist_chengnuoshu.docx"
    },
    checkUser () {
      if (!this.user.name) {
        this.$message.warning("请输入账号")
        return false
      }
      if (!this.user.password) {
        this.$message.warning("请输入密码")
        return false
      }
      return true
    },
    checkRegist () {
      if (!this.regist.userName) {
        this.$message.warning("请输入账号")
        return false
      }
      if (!this.regist.password) {
        this.$message.warning("请输入密码")
        return false
      }
      if (!this.regist.password2) {
        this.$message.warning("请再次确认密码")
        return false
      }
      if (this.regist.password != this.regist.password2) {
        this.$message.warning("两次密码不一致")
        return false
      }
      if (!this.regist.dwmch) {
        this.$message.warning("请输入单位名称")
        return false
      }
      if (!this.regist.weituoxming) {
        this.$message.warning("请输入委托人(办理人)姓名")
        return false
      }
      if (!this.regist.zhiwu) {
        this.$message.warning("请输入职务")
        return false
      }
      if (!this.regist.mobile) {
        this.$message.warning("请输入手机号")
        return false
      }
      if (!this.regist.email) {
        this.$message.warning("请输入邮箱")
        return false
      }
      if (!this.regist.regFileQy) {
        this.$message.warning("请上传企业营业执照扫描件")
        return false
      }
      if (!this.regist.regFileSq) {
        this.$message.warning("请上传授权委托书")
        return false
      }
      return true
    },
    checkinput () {
      if (!this.phone) {
        this.$message.warning("请输入账号")
        return false
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        // } else if (!/^\w{11}$/.test(this.phone)) {
        this.$message({
          message: "手机号码格式不正确"
        })
        return false
      } else if (!this.password) {
        this.$message({
          message: "请输入密码"
        })
        return false
      } else if (this.password.trim().length < 6 || !isPwd(this.password)) {
        this.$message({
          message: "密码格式不正确"
        })
        return false
      }
      return true
    },
    beforeUpload (file) {
      if (file.size > 5242880) {
        this.$message.warning("文件大小不能超过5M")
        return false
      }
    },
    beforeUpload1 (file) {
      if (file.size > 5242880) {
        this.$message.warning("文件大小不能超过5M")
        return false
      }
    },
    handleChange (info) {
      if (info.file.status === "done") {
        console.log('222')
        this.regist.regFileQy = info.file.response.fileName
        // let params = {
        //   level: this.level,
        //   typeDoc: "A",
        //   fileName: info.file.name,
        //   type: this.data.type,
        //   vendorId: this.data.vendorId,
        //   reversion: "1",
        //   remarks: this.data.orderName,
        //   stockPlace: info.file.response.data,
        //   vendorName: this.data.vendorName
        // }
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleChange1 (info) {
      if (info.file.status === "done") {
        this.regist.regFileSq = info.file.response.fileName
        // let params = {
        //   level: this.level,
        //   typeDoc: "A",
        //   fileName: info.file.name,
        //   type: this.data.type,
        //   vendorId: this.data.vendorId,
        //   reversion: "1",
        //   remarks: this.data.orderName,
        //   stockPlace: info.file.response.data,
        //   vendorName: this.data.vendorName
        // }
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    goHome () {
      this.$router.push({ path: '/home' })
    },
    login () {
      if (this.type == 1) {
        if (!this.checkUser()) return
        this.$http.login(Object.assign({ userName: this.user.name, userPwd: this.user.password })).then((res) => {
          tracker.setToken(res.token)
          tracker.setRoles(res.authRole)
          localStorage.setItem('userName', res.userName)
          if (this.$route.query.back) {
            window.location.href = this.$route.query.back
          } else {
            this.$router.push({ path: '/home' })
          }
          // this.$router.push({ path: path })
        }).catch(e => {})
      } else {
        if (!this.checkRegist()) return false
        this.role == 2 ? this.$http.regist4Bg({
          userName: this.regist.userName,
          password: this.regist.password,
          password2: this.regist.password2,
          dwmch: this.regist.dwmch,
          weituoxming: this.regist.weituoxming,
          zhiwu: this.regist.zhiwu,
          mobile: this.regist.mobile,
          email: this.regist.email,
          regFileQy: this.regist.regFileQy,
          regFileBg: this.regist.regFileSq
        }).then((res) => {
          this.$message.success(res.data)
          this.$router.push({ path: '/home' })
        }).catch(e => {}) : this.$http.regist(this.regist).then((res) => {
          this.$message.success(res.data)
          this.$router.push({ path: '/home' })
        }).catch(e => {})
      }
    }
  }
}
</script>
